$(function() {
    // 1. 初始化渲染数据
    // 1.1 获取搜索页传递过来的 搜索值
    var searchValue = lt.getUrlParams().key
    searchValue = decodeURIComponent(searchValue) || ''   // 中文需要url解码
    // 1.2 将值放在搜索列表页的搜索框中
    $('.search_input').val(searchValue) 
    // 1.3 定义渲染方法
    var render = function () {
        // 1.3.1 调用ajax请求方法
        getProductListData({
            proName: searchValue,
            page: 1,
            pageSize: 5
        }, function(res) {
            // console.log(res)
            // 1.3.2 用模板渲染数据
            $('.lt_product').html(template('searchListTpl', res))
        })
    }
    // 1.4 调用初始渲染方法
    render()
    
    // 2. 点击搜素渲染
    // 2.1 注册点击事件
    $('.search_btn').on('tap', function() {
        var searchValue = $.trim($('.search_input').val())
        // 2.1.1 加载状态提示
        $('.lt_product').html('<div class="loading"><span class="mui-icon mui-icon-spinner"></span></div>')
        // 2.2.2 请求数据重新渲染
        getProductListData({
            proName: searchValue,
            page: 1,
            pageSize: 5
        }, function(res) {
            // console.log(res)
            // 用模板渲染数据
            $('.lt_product').html(template('searchListTpl', res))
        })
    })
    
    // 3. 点击排序功能
    $('.lt_order [data-type]').on('tap', function() {
    	// 3.3 所有的置为初始状态
    	$(this).siblings().find('span').removeClass('fa-angle-up').addClass('fa-angle-down')
    	// 3.1 判断当前是否选中状态
    	if ($(this).hasClass('now')) {
    		var item = $(this).find('span')
    		console.log(item)
	    	if (item.hasClass('fa-angle-down')) {
	    		item.removeClass('fa-angle-down').addClass('fa-angle-up')
	    	} else {
	    		item.removeClass('fa-angle-up').addClass('fa-angle-down')
	    	}
    	}
    	// 3.2 实现排他功能
    	$(this).addClass('now').siblings().removeClass('now')
    	
    	// 3.4 请求数据重新渲染
    	// 3.4.1 获取排序类型
    	var order = {}
    	var key = $(this).data('type')
    	// 3.4.2 获取升序还是降序   1 升序 2 降序 接口提供
    	var val = $(this).find('span').hasClass('fa-angle-down') ? 2 : 1
    	order[key] = val
    	getProductListData($.extend({
            proName: searchValue,
            page: 1,
            pageSize: 5,
        }, order), function(res) {
            // console.log(res)
            // 1.3.2 用模板渲染数据
            $('.lt_product').html(template('searchListTpl', res))
        })
    })
    
    // 0 初始化下拉 上拉
    mui.init({
      pullRefresh: {
        container:".mui-scroll-wrapper",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
        down: {
          height: 50,//可选,默认50.触发下拉刷新拖动距离,
          auto: false,//可选,默认false.首次加载自动下拉刷新一次
          contentdown: "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
          contentover: "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
          contentrefresh: "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
          callback: function (){ //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
         
            //注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
            //没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
            // 补充说明  新版本下拉上拉更新啦
            // this --> var that = this
            // this --> bind(this)
            render()
            setTimeout(function() {
                // 下拉刷新效果隐藏
                this.endPulldownToRefresh()
            }.bind(this), 1000)
          }
        },
        up: {
            callback: function () {
                // 上拉效果隐藏
                var that = this
                setTimeout(function() {
                    // 下拉刷新效果隐藏
                    that.endPullupToRefresh()
                }, 1000)
            }
        }
      }
    })
})
function getProductListData(params, cb) {
    $.ajax({
        type:"get",
        url:"/product/queryProduct",
        async:true,
        data: params,
        dataType:'json',
        success: function (res) {
            /*模拟一下加载时间*/
            setTimeout(function(){
                if(res.data.length == 0){
                    mui.toast('没有相关商品')
                }
                cb && cb(res)
            },1000)
            
        }
    });
}
